<template>
	<view class="container">
		<!-- 提交加载 开始-->
		<u-loading-page :loading="pageLoading" loading-mode="spinner" loading-color="#FFFFFF" icon-size="36" font-size="12" color="#FFFFFF" loading-text="Loading···" bg-color="#00000050"></u-loading-page>
		<!-- 提交加载 结束-->
		<view class="bgimage">
			<image class="img" src="https://www.afbeijing.net/static_resources/assets/zhucebiaokuang.png"/>
		</view>
		<view class="main">
			<view class="heard">
				<view class="heardTitle">
					<text>注册信息</text>
				</view>
			</view>
			<view class="mainInput">
				<view class="caseInput-code" style="margin-bottom: 20rpx;">
					<view class="codeBtn">
						<view>姓</view><view>名:</view>
					</view>
					<input type="text" v-model="formData.cnName" maxlength="6" class="inp-code" placeholder="请输入姓名"
						placeholder-class="title_input" />
				</view>
				<view class="caseInput-code" style="margin-bottom: 20rpx;">
					<view class="codeBtn"><view>性</view><view>别:</view></view>
					<input type="text" v-model="formData.gender" @click="goToRegister(1)" disabled maxlength="6"
						class="inp-code" placeholder="请选择性别" placeholder-class="title_input" />
				</view>
				<view class="caseInput-code" style="margin-bottom: 20rpx;" @click="goToRegister(2)">
					<view class="codeBtn"><view>出</view><view>生</view><view>日</view><view>期:</view></view>
					<input type="text" v-model="formData.birthDate" disabled class="inp-code" placeholder="请选择出生日期"
						placeholder-class="title_input" />
				</view>
				<view class="caseInput-code" style="margin-bottom: 20rpx;">
					<view class="codeBtn"><view>密</view><view>码:</view></view>
					<input type="password" v-model="formData.passWd" @blur="onInput('passWd',$event)" maxlength="12"
						class="inp-code" placeholder="请输入密码" placeholder-class="title_input" />
				</view>
				<view class="caseInput-code">
					<view class="codeBtn"><view>密</view><view>码</view><view>确</view><view>认:</view></view>
					<input type="password" v-model="formData.confirmPassWd" @blur="onInput('confirmPassWd',$event)"
						maxlength="12" class="inp-code" placeholder="请再次确认密码" placeholder-class="title_input" />
				</view>
				<view class="mainInfo">
					<text>密码可由数字和字母组合，不可使用特殊符号，密码长度为6-12位。</text>
				</view>
				<!-- <view class="mainTips">
					<text>原密码输入错误!</text>
				</view> -->
				<view class="caseInput-code" style="margin-top: 20rpx;">
					<view class="codeBtn"><view>手</view><view>机</view><view>号</view><view>码:</view></view>
					<input type="text" v-model="formData.phoneNumber" class="inp-code" placeholder="请输入手机号码"
						placeholder-class="title_input" />
				</view>
				<view class="caseInput-code" style="margin-top: 20rpx;">
					<view class="codeBtn"><view>验</view><view>证</view><view>码:</view></view>
					<input type="text" v-model="formData.code" class="inp-code" placeholder="请输入验证码"
						placeholder-class="title_input" />
				</view>
			</view>
			<view class="getCode">
				<text @click="getCode" :disabled="isCountingDown" class="getCodeText">{{ countDownText }}</text>
			</view>
		</view>
		<view class="footCase">
			<view class="footBtn" @click="SubmitEvent(2)">
				确定
			</view>
		</view>
		<!-- 弹出层开始 -->
		<u-datetime-picker ref="datetimePicker" :show="dataShow" v-model="value1" @confirm="confirm"
			:formatter="formatter" confirmColor="#ffffff" cancelColor="#fff" @cancel="close"
			mode="date"></u-datetime-picker>
		<!-- 弹出日期选择 -->
		<u-popup :show="show" :round="30" mode="bottom" @close="close">
			<!-- keyName="label"  -->
			<!-- confirmColor="#ffffff" -->
			<u-picker :show="show" style="height: 100px;" @change="pickerChange" :columns="titleList" keyName="clsName"
				confirmText="取消" itemHeight="38" :title="titleText" confirmColor="#ffffff" cancelColor="#FFB607"
				@confirm="pickerCancel">
			</u-picker>
			<view class="button_qd" @click="pickerConfirm">确定</view>
		</u-popup>
		<!-- 弹出日期选择 结束 -->
		<!-- 弹出层结束 -->
	</view>
</template>

<script>
	import {
		registerByCode,
		getPhoneCode
	} from './api/index.js';
	export default {
		data() {
			return {
				pageLoading:false,
				show: false,
				dataShow: false,
				titleText: '',
				changeVle: '',
				titleList: [],
				isCountingDown: false,
				countDownSeconds: 60,
				countDownText: '获取验证码',
				csdeState: false,
				phoneNum: '',
				formData: {
					passWd: ''
				},
				mima: '',
			}
		},
		methods: {
			//编辑密码
			onInput(key, event) {
				// this.inputValue = event.target.value;
				const inputValue = event.target.value;
				const regex = /^[A-Za-z0-9]+$/;
				if (!regex.test(inputValue)) {
					// 如果输入不符合正则表达式，弹出错误提示
					this.formData.passWd = ''
					this.formData.confirmPassWd = ''
					console.log(this.formData.confirmPassWd)
					uni.showToast({
						title: '输入必须是数字和字母的组合',
						icon: 'none'
					});
				}
				//  if (event.target.value.length < 6) {
				// // 如果输入少于2位，则不允许删除，直到至少为6位
				// this.formData[key] = event.target.value.substring(0, 6);
				//  }
			},
			//去注册
			SubmitEvent() {
				//接口后期打开
				registerByCode(this.formData).then(response => {
					console.log(response)
					if (response.code === 0) {
						uni.showToast({
							title: response.msg,
							icon: 'success',
							duration: 2000,
							complete: () => {
								uni.reLaunch({
									url: '/src/views/pageMain/pageLogin/index'
								});
							}
						});
					} else {
						uni.$u.toast(response.msg)
					}
				})
			},
			// 获取验证码
			getCode() {
				if (this.formData.phoneNumber) {
					getPhoneCode({
						phoneNumber: this.formData.phoneNumber
					}).then(response => {
						console.log(response)
						if (response.code === 0) {
							if (!this.isCountingDown) {
								this.isCountingDown = true;
								this.countDown();
							}
						}
					})
				} else {
					uni.$u.toast('请输入手机号')
				}


			},
			//确认日期
			confirm(e) {
				this.dataShow = false
				// / 将时间戳转换为Date对象
				let date = new Date(e.value);
				// 获取年月日并格式化为字符串
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
				let day = date.getDate().toString().padStart(2, '0');
				// 组合为yyyy-mm-dd格式
				let formattedDate = `${year}-${month}-${day}`;
				this.formData.birthDate = formattedDate
			},
			// 选择确定
			pickerConfirm(e) {
				uni.$u.toast('切换成功')
				console.log('confirm', e, this.sex)
				this.show = false
				if (this.sex === '男') {
					this.formData.gender = '1'
				} else {
					this.formData.gender = '2'
				}
				// this.getForm()
			},
			// 选择性别|日期
			goToRegister(e) {
				console.log(1)
				switch (e) {
					case 1:
						this.show = true
						this.titleText = '选择性别'
						this.changeVle = e
						this.titleList = [
							['男', '女']
						]
						break;
					case 2:
						// this.show = true
						this.titleText = '选择日期'
						this.dataShow = true
						break;
				}
			},
			// / 获取验证码倒计时
			countDown() {
				let timer = setInterval(() => {
					if (this.countDownSeconds > 0) {
						this.countDownSeconds--;
						this.countDownText = `${this.countDownSeconds} 秒后重新获取`;
					} else {
						clearInterval(timer);
						this.isCountingDown = false;
						this.countDownSeconds = 60;
						this.countDownText = '获取验证码';
					}
				}, 500);
			},
			// 选择取消
			pickerCancel(e) {
				console.log('confirm', e)
				this.show = false
				return e
			},
			close() {
				this.show = false
				this.dataShow = false
			},
			// 选择值变化
			pickerChange(e) {
				console.log(e, '选择值')
				switch (this.changeVle) {
					case 2:
						this.sex = e.value[0]
						break;
					case 3:
						this.age = e.value[0]
						break;
					default:
						break;
				}
			},
			go(e) {
				switch (e) {
					case 1:
						uni.navigateTo({
							url: '/src/views/pageMine/xiugaimima/wangjimima/index' // 这里替换成你实际要跳转的页面路径
						});
						break;
					case 2:
						uni.switchTab({
							url: '/src/views/pageMain/pageMine/index'
						});
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/static/styles/variables.scss";
	.container {
		position: relative;
		background-color: #F0F0F0;
		height: 100vh;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.img{
		margin-top: 7%;
		width: 650rpx;
		height: 140rpx;
	}
	.main {
		width: 650rpx;
		height: 65vh;
		background: #FFFFFF;
		border-radius: 0 0 40rpx 40rpx;
		margin-top: -2%;
	}
	.heard{
		margin-left: 10%;
		margin-top: -7%;
	}
	.heardTitle {
		width: 220rpx;
		height: 60rpx;
		background: #FF8106;
		border-radius: 20rpx;
		text-align: center;
		font-weight: normal;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 60rpx;
	}
	.mainInput {
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.caseInput-code {
		width: 540rpx;
		height: 80rpx;
		border-radius: 40rpx;
		border: 1px solid #cccccc;
		display: flex;
		align-items: center;
	}
	
	.codeBtn {
		width: 260rpx;
		height: 56rpx;
		border-radius: 28rpx;
		font-size: 30rpx;
		color: #666;
		display: flex;
		justify-content: space-between;
		line-height: 56rpx;
		padding-left: 30rpx;
	}
	
	.inp-code {
		width: 550rpx;
		height: 56rpx;
		border-radius: 28rpx;
		text-align: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #888;
		line-height: 44rpx;
	}
	
	.mainInfo{
		width: 90%;
		font-weight: 400;
		font-size: 24rpx;
		color: #cccccc;
		padding-left: 40rpx;
		box-sizing: border-box;
		padding-right: 40rpx;
		line-height: 30rpx;
		margin-top: 20rpx;
	}
	
	::v-deep.title_input {
		margin-left: 30rpx;
		font-size: 28rpx;
		font-weight: 300;
		color: #CCCCCC;
		text-align: left;
	}
	.mainTips {
		width: 180rpx;
		height: 36rpx;
		background: #F2F2F2;
		border-radius: 18rpx;
		text-align: center;

		font-weight: 400;
		font-size: 20rpx;
		color: #FF8106;
		line-height: 36rpx;
		margin-top: 5%;
	}
	.getCode{
		width: 200rpx;
		height: 60rpx;
		background: #FFB607;
		border-radius: 30rpx;
		float: right;
		text-align: center;
		line-height: 55rpx;
		margin-right: 10%;
		margin-top: 20rpx;
	}
	.getCodeText{
		font-weight: 200;
		font-size: 26rpx;
		color: #FFFFFF;
	}
	.footCase {
		margin-top: 10%;
	}

	.footInfo {
		text-align: center;
		margin-bottom: 10rpx;
	}

	.footInfo1 {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #FF8106;
		line-height: 30rpx;
	}

	.footBtn {
		width: 650rpx;
		height: 80rpx;
		background: #FF8106;
		border-radius: 40rpx;
		text-align: center;

		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 80rpx;
	}
	// 弹出层样式
	::v-deep .u-popup__content {
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding-bottom: 100rpx;
	}
	
	::v-deep .u-toolbar {
		background: #FFB607;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}
	
	::v-deep.u-toolbar__title {
		color: #ffffff !important;
	}
	
	::v-deep .button_qd {
		position: fixed;
		z-index: 10078;
		width: 360rpx;
		height: 60rpx;
		font-size: 30rpx;
		background: #FF8106;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		bottom: 80rpx;
		margin-left: 25%;
		border-radius: 30rpx;
	}
	//弹出层样式end
</style>